<template>
  <div class="project-num-inventory">
    <div v-if="stepBtnShow" class="model-title">
      <div class="text">
        3、确认工程数量清单
      </div>
      <BaseButton v-permission="{ btnCode: 'dlyh_d416_e19_2' }" @click="exportInventory">导出工程数量清单</BaseButton>
    </div>
  
    <div class="info">
      <el-form slot="form" class="info-form" :inline="true" size="medium">
          <el-form-item label="公路名称：">
              {{ info.highwayName }}
          </el-form-item>
          <el-form-item label="施工里程桩号：">
             {{ info.stakeNoRange }}
          </el-form-item>
          <el-form-item label="施工单位：">
              {{ info.constructionUnitName }}
          </el-form-item>
          <el-form-item label="施工日期：">
             {{ info.constructionDate }}
          </el-form-item>
      </el-form>
      <div v-if="!stepBtnShow" class="export-btn">
        <BaseButton v-permission="{ btnCode: 'dlyh_d416_e19_2' }" @click="exportInventory">导出工程数量清单</BaseButton>
      </div>
    </div>
    <div :class="[!stepBtnShow ? 'table-warp-detail' : 'table-warp',]">
        <!-- :height="stepBtnShow ? '100%' : 'auto'" -->
        <BaseTable 
        ref="table" 
        class="table"
        height="100%"
        :data="list" 
        :loading="listLoading"
        :columns="columns"
        highlight-current-row 
        :row-style="rowStyle"
        >
            <template #serialNumber="{ scope: { row} }">
                <span v-if="row.level === 1">{{ numToChinese(row.serialNumber) }}</span>
                <span v-else>{{ row.serialNumber }}</span>
            </template>
            <template #code="{ scope: { row} }">
                {{ row.listSubitemCode }}
            </template>
            <template #stake="{ scope: { row} }">
                <span v-if="row.startStakeNo || row.endStakeNo">
                    <span v-if="row.startStakeNo">{{ row.startStakeNo }}</span>
                    <span v-if="row.startStakeNo && row.endStakeNo">-</span>
                    <span v-if="row.endStakeNo">{{ row.endStakeNo }}</span>
                    <span>（{{ row.direction | value2Name(directionOptions, 'value', 'label') }}） </span>
                </span>
            </template>
        </BaseTable>
        <Pagination
            clas="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @size-change="getList"
            @current-change="getList"
        />
    </div>
    <div v-if="stepBtnShow" class="btn">
      <BaseButton type="second" @click="handleBack">上一步</BaseButton>
      <BaseButton @click="handleNext">保存并下一步</BaseButton>
    </div>
  </div>
</template>
<script>
import { value2Name } from '@/filters'
import { DirectionTwoWayOptions } from '@/config/constants'

import { ApplicationModel } from '@/models'
// 导出
import { ApplicationApi } from '@/api'
import downLoad from '@/utils/blob-download'
export default {
    components: {
      
    },
    filters: {
        value2Name
    },
    props: {
        curStep: {
            type: [Number],
            required: false,
            default: 2
        },
        stepBtnShow: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            id: '', // 申请id 
            model: new ApplicationModel(),
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            list: [], // list
            columns: [
                {
                    slot: 'serialNumber',
                    attrs: {
                        label: '序号',
                        prop: 'serialNumber',
                        width: 70
                    }
                },
                {
                    slot: 'code',
                    attrs: {
                        label: '清单编号',
                        prop: 'id',
                        width: 90
                    }
                },
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'listSubitemName',
                        'show-overflow-tooltip': true,
                    }
                },
                {
                    slot: 'stake',
                    attrs: {
                        label: '起止桩号',
                        prop: 'stake',
                        'show-overflow-tooltip': true,
                        'min-width': 150,
                    }
                },
                {
                    attrs: {
                        label: '位置',
                        prop: 'location',
                        'show-overflow-tooltip': true
                    }
                },
                
                {
                    attrs: {
                        label: '单位',
                        prop: 'unitSymbol',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '长度（m）',
                        prop: 'length',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '宽度（m）',
                        prop: 'width',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '高度（m）',
                        prop: 'height',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '面积（㎡）',
                        prop: 'area',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '体积（m³）',
                        prop: 'volume',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '数量',
                        prop: 'quantity',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '开工时间',
                        prop: 'startTime',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '完工时间',
                        prop: 'endTime',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '备注',
                        prop: 'remark',
                        'show-overflow-tooltip': true
                    }
                },
            ],
            // 基础信息
            info: {
                highwayName: '', stakeNoRange: '', constructionUnitName: '', constructionDate: '' 
            },
            listLoading: false,
            directionOptions: DirectionTwoWayOptions,
        }
    },
    watch: {
        curStep: {
            immediate: true,
            handler(val) {
                if (val === 2 && this.stepBtnShow) {
                    this.getList()
                }
            }
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model.billQuantities({...this.page, id: this.id}).then(res => {
                const { highwayName, stakeNoRange, constructionUnitName, constructionDate} = res.billQuantities
                this.info = {
                    highwayName, stakeNoRange, constructionUnitName, constructionDate 
                }
                this.list = res.billQuantities.billQuantitiesDetailList 
                this.page.total = res.total
            }).finally(() => {
                this.listLoading = false
            })
        },
        // 上一步
        handleBack() {
            this.$emit('back', this.curStep)
        },
        // 下一步
        handleNext() {
            this.$emit('next', this.id)
        },
        // 导出工程数量清单
        exportInventory() {
            this.exportLoading = true
            const path = ApplicationApi.gcslqdPath
            const params = {
                id: this.id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        },
        // 数字转化为中文
        numToChinese(num) {
            const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
            const units = ['', '十', '百', '千', '万']
            let str = ''
    
            if (num === 0) {
                return chineseNumbers[0]
            }
 
            for (let i = 0; num > 0; i++) {
                const digit = num % 10
                if (digit !== 0) {
                    str = chineseNumbers[digit] + units[i] + str
                } else if (!str.startsWith(chineseNumbers[0])) {
                    str = chineseNumbers[0] + str
                }
                num = Math.floor(num / 10)
            }
 
            return str.replace(/^一十/, '十')
        },
        rowStyle({row, rowIndex}) {
            if (row.level === 1) {
                return {
                    'font-weight': 600,
                    // color: 'red'
                }
            }
        }
    }
}
</script>
<style scoped lang="scss">
.project-num-inventory{
  height:  calc(100% - 90px);
  width: 100%;
  box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
  position: relative;
  .info{
   width: 100%;
   padding: 16px;
   display: flex;
   .info-form{
        flex-grow: 1;
   }
   .export-btn{
        width: 300px;
   }
  }
  .handle-btn{
    display: flex;
  }
  .table-warp-detail{
    margin-bottom: 24px;
    min-height: 200px;
    .table{
        height: 100% !important;
        min-height: 400px;
    }
  }
  .table-warp{
    width:100%;
    box-sizing: border-box;
    height: 480px;
    .table{
        overflow-y: auto;
    }
  }
  .table-warp,.table-warp-detail{
    .pagination{
        text-align: right;
        margin-right: 20px;
        margin-top: 8px;
    }
  }
  .export-btn{
    width: 100%;
    text-align: right;
  }
 
  .model-title{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(131, 145, 178, 0.1);
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px;
    // position: absolute;
    // bottom: 24px;
  }
}
::v-deep .el-form-item{
    margin-bottom: 0px;
}

</style>
